var y1 = 77;
var y2 = 50;
var y3 = 23;
var y4 = -4;
var am2nc2 = [
    [],
    [64, y1],
    [48, y1, 80, y1],
    [48, y1, 80, y1, 64, y2],
    [32, y1, 64, y1, 96, y1, 48, y2],
    [32, y1, 64, y1, 96, y1, 48, y2, 80, y2],
    [32, y1, 64, y1, 96, y1, 48, y2, 80, y2, 64, y3],
    [16, y1, 48, y1, 80, y1, 112, y1, 32, y2, 64, y2, 96, y2],
    [16, y1, 48, y1, 80, y1, 112, y1, 32, y2, 64, y2, 96, y2, 48, y3],
    [16, y1, 48, y1, 80, y1, 112, y1, 32, y2, 64, y2, 96, y2, 48, y3, 80, y3],
    [16, y1, 48, y1, 80, y1, 112, y1, 32, y2, 64, y2, 96, y2, 48, y3, 80, y3, 64, y4],
    [0, y1, 32, y1, 64, y1, 96, y1, 128, y1, 16, y2, 48, y2, 80, y2, 112, y2, 32, y3, 64, y3],
    [0, y1, 32, y1, 64, y1, 96, y1, 128, y1, 16, y2, 48, y2, 80, y2, 112, y2, 32, y3, 64, y3, 96, y3]
];

function AtomicScale(div) {
    this.div = div;
    this.nucleons = div.attr("nucleons");
    this.protons = div.attr("protons");
    this.attempts = 0;
    this.complete = false;
}

AtomicScale.prototype = {
    start:function () {
        var d = this.div;
        d.append("<img class='scale' src='/assets/scale.png' />");
        d.append("<div class='mass'>0.0 amu</div>");
        for (var i = 0; i < 12; i++) {
            var x = (i < 6 ? 64 : 488) + i % 3 * 64;
            var y = 64 + Math.round(i / 3) % 2 * 64;
            d.append("<canvas class='" + (i < 6 ? "proton" : "neutron") + "' " +
                "style='position:absolute;left:" + x + "px;top:" + y + "px;'" +
                "width='32px' height='32px' left='" + x + "' top='" + y + "'></div>")
        }
        d.append("<div class='check_answer'><button>Check<br />Answer</button></div>");
        var btn = d.find(".check_answer button");
        btn.click(this,function (event) {
            event.data.checkAnswer();
        }).button();
        this.addEventListeners();
        drawNucleons(d);
    },

    addEventListeners:function () {
        var d = this.div;
        $.each(d.find("canvas.proton, canvas.neutron"), function (i, c) {
            mouse.addStart($(c));
        });
        var body = $("body");
        mouse.addMove(body);
        d.bind("mouseup touchend", this, function (event) {
            if (!mouse.target) {
                return;
            }
            event.data.positionNucleons(mouse.target.parent());
            mouse.down = false;
            mouse.target = false;
        });
        body.bind("mouseup touchend", this, function (event) {
            $("body").enableSelection();
            if (mouse.target) {
                var t = mouse.target;
                t.animate({ left:t.attr("left"), top:t.attr("top") });
                mouse.down = false;
                mouse.target = false;
            }
        });
    },

    positionNucleons:function () {
        var d = this.div;
        d.find(".check_answer button").css({ opacity:1 });
        d.find(".check_answer").css({ background:"none" });
        var nucleons = d.find("canvas.proton, canvas.neutron");
        var valid = this.getValidNucleons();
        $.each(nucleons, function (i, c) {
            if ($.inArray(c, valid) > -1) {
                return;
            }
            var n = $(c);
            n.animate({ left:n.attr("left"), top:n.attr("top") });
        });
        var dt = d.find("img.scale");
        dt.l = dt.position().left + 20;
        dt.t = dt.position().top - 100;
        if (valid.length > 0) {
            var nc = am2nc2[valid.length];
            for (var i = 0; i < valid.length; i++) {
                $(valid[i]).animate({ left:dt.l + nc[i * 2], top:dt.t + nc[i * 2 + 1] });
            }
        }
        d.find("div.mass").html(valid.length + ".0 amu");
    },

    getValidNucleons:function () {
        var d = this.div;
        var nucleons = d.find("canvas.proton, canvas.neutron");
        var dt = d.find("img.scale");
        dt.l = dt.position().left;
        dt.t = dt.position().top - 120;
        dt.w = dt.width();
        dt.h = 160;
        return nucleons.filter(function (i, c) {
            var n = $(c);
            n.l = n.position().left;
            n.t = n.position().top;
            n.w = n.width();
            n.h = n.height();
            return (dt.l < n.l) && (n.l + n.w < dt.l + dt.w) && (dt.t < n.t) && (n.t + n.h < dt.t + dt.h);
        });
    },

    checkAnswer:function (event) {
        var d = this.div;
        var nucleons = this.getValidNucleons();
        var protons = nucleons.filter(function (i, c) {
            return $(c).hasClass("proton");
        });
        if (nucleons.length > 0 || protons.length > 0) {
            this.attempts++;
        }
        var correct = nucleons.length == this.nucleons && protons.length == this.protons;
        var background = "url('/assets/" + (correct ? "apply" : "cancel") + ".png') center center no-repeat";
        d.find(".check_answer button").css({ opacity:0 });
        d.find(".check_answer").css({ background:background });
        this.complete = correct;
        $("body").trigger($.Event("update_score"));
    }
};
